<template>
  <div class="main">
    <div class="mainTitle">
      <h2>广告管理</h2>
      <div>
        <el-button type="primary" icon="el-icon-plus" @click="add"
        >新增</el-button
        >
      </div>
    </div>
    <TableList
      :loading="loading"
      :tabledata="tableData"
      :tabledatacolumn="tableDataColumn"
      :isshow="false"
    >
      <template v-slot:default="info">
        <el-button type="text" @click="handleEdit(info.info)">编辑</el-button>
        <el-button type="text" @click="deleteRow(info.info)">删除</el-button>
        <el-button type="text" @click="handleStatus(info.info)" v-if="info.info.status==1"><span style="color: green;font-weight: bold;" title="点击可禁用">已启用</span></el-button>
        <el-button type="text" @click="handleStatus(info.info)" v-else><span style="color: red;font-weight: bold;" title="点击可启用">已禁用</span></el-button>
      </template>
    </TableList>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="50%" :close-on-click-modal="false">
      <Form
        :formdata="formdata"
        :formobj="formobj"
        ref="bannerForm"
        :formrules="formrules"
      ></Form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import Form from "@/components/form.vue";
  import TableList from "@/components/TableList.vue";
  import {
    bannerApiAdd,
    bannerApiqueryAll,
    bannerApiEdit,
    bannerApiqueryOne,
    bannerApidelete,
  } from "@/api/webpage";
  export default {
    name: "bannerManager",
    components: {
      TableList,
      Form,
    },
    data() {
      return {
        loading:true,
        title: "",
        dialogVisible: false,
        tableData: [],
        tableDataColumn: [
          { label: "标题", key: "name" },
          { label: "链接地址", key: "thumbnailUrl" },
          { label: "图片", key: "picurl", type: "image", srclist:[] },
          { label: "宽度（像素px）", key: "width" },
          { label: "高度（像素px）", key: "height" },
          { label: "key", key: "type" },
        ],
        formdata: {},
        formobj: [
          { label: "广告标题", key: "name", type: "input" },
          { label: "广告宽度", key: "width", type: "input" },
          { label: "广告高度", key: "height", type: "input" },
          /* { label: "key", key: "type", type: "input" },*/
          { label: "链接", key: "thumbnailUrl", type: "input" },
          { label: "图片", key: "url", type: "pic" },
          // { label: "移动端图片", key: "thumbnailUrl", type: "pic" },
        ],
        formrules: {
          name: [{ required: true, message: "请输入广告标题", trigger: "blur" }],
          width: [{ required: true, message: "请输入广告宽度", trigger: "blur" }],
          height: [{ required: true, message: "请输入广告高度", trigger: "blur" }],
          url: { required: true, message: "请上传", trigger: "change" },
          // thumbnailUrl: { required: false, message: "请上传", trigger: "change" },
        },
        type: "increased",
        rowId: "",
      };
    },
    created() {
      this.getlist();
    },
    methods: {
      deleteRow(row) {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let ids= []
            ids.push(row.id)
            bannerApidelete(ids)
              .then((res) => {
                if (res.code == 0) {
                  this.$message({
                    type: "success",
                    message: "删除成功!",
                  });
                  this.getlist();
                }
              })
              .catch((err) => {
                console.log(err);
              });
          })
          .catch(() => {});
      },
      handleStatus(row) {
        let mess = "启用"
        let status = row.status;
        if(status == 1){ // 禁用
          mess = "禁用";
        }

        this.$confirm("此操作将"+mess+"该条数据项, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            if(status==1){
              row.status = 0;
            }else{
              row.status = 1;
            }
            bannerApiEdit(row).then(res=>{
              if (res.code == 0) {
                this.$message({
                  type: "success",
                  message: mess+"成功!",
                });
                this.getlist();
              }
            })
          })
          .catch(() => {});
      },
      add() {
        this.title = "新增";
        this.type = "increased";
        this.dialogVisible = true;
        this.formdata= {}
      },
      handleEdit(row) {
        this.title = "编辑";
        this.type = "edit";
        this.rowId = row.id;
        this.dialogVisible = true;
        this.getdata(row.id);
      },
      getdata(id) {
        bannerApiqueryOne({ id: id })
          .then((res) => {
            if (res.code == 0) {
              this.formdata = res.data
            }
          })
          .catch((err) => {
            console.log(err);
          });
      },
      // 获取列表
      getlist() {
        bannerApiqueryAll({ type: "advertising" })
          .then((res) => {
            if (res.code == 0) {
              this.loading= false
              let array = []
              this.tableData = res.data.map(item=>{
                item.picurl = '/show'+item.url
                array.push('/show'+item.url)
                return item
              })

              this.tableDataColumn[2].srclist = array
              // console.log('3323',this.tableDataColumn[2].srclist);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      },
      submit() {;
        this.$refs.bannerForm.getData().then((res) => {
          console.log("数据格式：",this.formdata)
          console.log("子组件中的数据格式：",res)
          if (this.type == "edit") {
            res.id = this.rowId;
            res.type="advertising";
            bannerApiEdit(res)
              .then((response) => {
                if (response.data == 1) {
                  this.$message.success("成功");
                  this.dialogVisible = false;
                  this.getlist();
                  this.$refs.bannerForm.resetForm();
                  this.$refs.bannerForm.clearValidate();
                } else {
                  this.$message.error("失败");
                }
              })
              .catch((err) => {
                console.log(err);
              });
          } else {
            res.type="advertising";
            bannerApiAdd(res)
              .then((response) => {
                if (response.data == 1) {
                  this.$message.success("成功");
                  this.dialogVisible = false;
                  this.getlist();
                  this.$refs.bannerForm.resetForm();
                  this.$refs.bannerForm.clearValidate();
                } else {
                  this.$message.error("失败");
                }
              })
              .catch((err) => {
                console.log(err);
              });
          }
          /*this.$nextTick(()=>{
            this.formdata = {}
          })*/
        });
      },
      cancel() {
        this.dialogVisible = false;
        this.$refs.bannerForm.resetForm();
        this.$refs.bannerForm.clearValidate();
      },
    },
  };
</script>
<style scoped>
  @import "~@/assets/css/adminstyle.css";
</style>
